﻿<Page
    x:Class="Stopwatch.HubPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Stopwatch"
    xmlns:common="using:Stopwatch.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    DataContext="{Binding Stopwatch, RelativeSource={RelativeSource Self}}"
    xmlns:data="using:Stopwatch.Data"
    mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>

            <Style x:Key="kMilSecondText" TargetType="TextBlock">
                <Setter Property="FontFamily" Value="Microsoft YaHei Light"/>
                <Setter Property="FontSize" Value="12"/>
            </Style>

            <common:TickToTimeValueConverter x:Key="TickToTimeValueConverterKey"/>

            <DataTemplate x:Key="StopwathchItemTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="40"/>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" 
                               Text="{Binding Period, Converter={StaticResource TickToTimeValueConverterKey}}"/>
                    <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Text="{Binding Count}"/>
                    <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" 
                               Text="{Binding Span, Converter={StaticResource TickToTimeValueConverterKey}}" 
                               Style="{StaticResource kMilSecondText}"/>
                </Grid>
            </DataTemplate>

        </ResourceDictionary>
    </Page.Resources>

    <Grid x:Name="LayoutRoot">
        <Pivot>
            <PivotItem Header="Stopwatch">
                <StackPanel>
                    
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40"/>
                            <RowDefinition Height="40"/>
                            <RowDefinition Height="40"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" HorizontalAlignment="Center" Text="{Binding Clock.Period, Converter={StaticResource TickToTimeValueConverterKey}}"/>
                        <TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Text="{Binding Clock.Count}"/>
                        <TextBlock Grid.Column="1" Grid.Row="1" HorizontalAlignment="Right" Text="{Binding Clock.Span, Converter={StaticResource TickToTimeValueConverterKey}}"/>
                        <Button x:Name="count" HorizontalAlignment="Center" Grid.Row="2" Grid.Column="0" Content="计次" Tapped="onCountTapped"/>
                        <Button x:Name="start" HorizontalAlignment="Center" Grid.Row="2" Grid.Column="1" Content="开始" Tapped="onStartTapped" FontFamily="Microsoft YaHei Light"/>
                    </Grid>

                    <ListView x:Name="listView" ItemsSource="{Binding Clocks}"
                              ItemTemplate="{StaticResource StopwathchItemTemplate}"
                              ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Auto">
                    </ListView>

                </StackPanel>
            </PivotItem>
        </Pivot>
    </Grid>
</Page>